/**
 * setState用法详解
 */

import React, { Component } from 'react';


const ui = (
  <div>
    <h1>hello jsx</h1>
  </div>
)

console.log(ui)

class App extends Component {

  state = {
    count: 0
  }

  add = () => {
    // setState()异步的方法
    this.setState({
      count: this.state.count + 1
    }, () => {
      // 获取最新的状态数据
      console.log(this.state.count)
    })

    // this.setState({
    //   count: this.state.count + 2
    // })

    // this.setState({
    //   count: this.state.count + 3
    // })
    // 能不能拿到最新的状态数据
    // 同步
    // console.log(this.state.count)
  }

  addFn = () => {
    this.setState((state) => {
      // console.log(state, props);
      return {
        count: state.count + 1
      }
    }, () => {
      console.log(this.state.count)
    })

    this.setState((state) => {
      // console.log(state, props);
      return {
        count: state.count + 2
      }
    }, () => {
      console.log(this.state.count)
    })

    this.setState((state) => {
      // console.log(state, props);
      return {
        count: state.count + 3
      }
    }, () => {
      console.log(this.state.count)
    })

    // 能不能拿到最新的状态数据
    // 同步
    // console.log(this.state.count)
  }

  render() {
    return (
      <div>
        <h1>setState用法详解</h1>
        <p>{this.state.count}</p>
        <button onClick={this.add}>add对象语法</button>
        <button onClick={this.addFn}>add函数语法</button>
      </div>
    );
  }
}

export default App;